"use client"; /** * /w/:workspace/settings/appearance — theme + interface density/accent. * * - Theme: light / dark / system via the core useUiStore (persisted to * `factory-theme`, applies `.dark` on ; system follows the OS). * - Density + accent are UI-only and self-hosted; they write CSS custom * properties to so the values apply without a backend. They are not * persisted yet (placeholder controls) — flagged for a core settings-store. */ import { useEffect, useState } from "react"; import { Moon, Monitor, Sun } from "lucide-react"; import { Switch } from "@factory/ui"; import { useUiStore, Theme } from "@/stores/ui-store"; import { cn } from "@/lib/utils"; import { SettingsShell, Section, Field } from "@/components/settings/settings-shell"; const THEME_OPTIONS: { value: Theme; label: string; icon: typeof Sun }[] = [ { value: "light", label: "Light", icon: Sun }, { value: "dark", label: "Dark", icon: Moon }, { value: "system", label: "System", icon: Monitor }, ]; const DENSITIES = ["comfortable", "compact"] as const; const ACCENTS = [ { value: "#6366f1", label: "Indigo" }, { value: "#0ea5e9", label: "Sky" }, { value: "#10b981", label: "Emerald" }, { value: "#f59e0b", label: "Amber" }, { value: "#ef4444", label: "Red" }, { value: "#8b5cf6", label: "Violet" }, ] as const; export default function SettingsAppearancePage() { const theme = useUiStore((s) => s.theme); const setTheme = useUiStore((s) => s.setTheme); const presenceToastsEnabled = useUiStore((s) => s.presenceToastsEnabled); const setPresenceToastsEnabled = useUiStore((s) => s.setPresenceToastsEnabled); const [density, setDensity] = useState<(typeof DENSITIES)[number]>("comfortable"); const [accent, setAccent] = useState("#6366f1"); // Apply density + accent as CSS vars on . UI-only, no persistence. useEffect(() => { const root = document.documentElement; root.style.setProperty("--factory-density", density); root.style.setProperty("--factory-accent", accent); }, [density, accent]); return (

{THEME_OPTIONS.map((o) => { const active = theme === o.value; return ( ); })}

{theme === "system" && (

Follows your operating system's light/dark preference.

)}

{DENSITIES.map((d) => ( ))}

{ACCENTS.map((a) => ( ))}

); }